<template>
  <DynamicTable header-title="局长信箱" :custom-row="rowClick" :data-request="listCxjsw" :search="true" :columns="columns"
    show-index bordered size="small" />
</template>

<script setup lang="tsx">
import type { TableColumn } from '@/components/core/dynamic-table';
import { useTable } from '@/components/core/dynamic-table';
import { listCxjsw } from '@/api/workorder/cxjsw';
import { Tooltip } from 'ant-design-vue';
import { dictPotionsListApi } from '@/api/workorder/select';
import { ref } from 'vue';
import { selectDictLabel } from '@/utils/telchina';
import { useRouter } from 'vue-router'


defineOptions({
  name: 'cxjsw',
});


const [DynamicTable] = useTable();
const router = useRouter()

const xxlyDict = ref({});

// 自定义转码字典
dictPotionsListApi({ "code": 'info_serrces' }).then((res) => {
  xxlyDict.value = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
});

const rowClick = ((record) => {
  return {
    onClick: () => {
      router.push({ name: '/workorder/addWorkOrder', state: { record: JSON.stringify(record) } })
    },
  }
})


const columns: TableColumn[] = [

  {
    title: '工单分类',
    dataIndex: 'messagetype',
    align: 'center',
    width: 100,
    hideInSearch: true,
    customRender: ({ record }) => record.messagetype == 0 ? '办理单' : '',
  },
  {
    title: '电话内容',
    dataIndex: 'wtms',
    width: 600,
    align: 'center',
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.wtms}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.wtms}
          </div>
        </Tooltip>
      );
    },
  },
  {
    title: '发生地址',
    dataIndex: 'address',
    align: 'center',
    width: 300,
    customRender: ({ record }) => {
      return (
        <Tooltip title={record.address}>
          <div class="ellipsis" style={{ float: 'left', maxWidth: '100%' }}>
            {record.address}
          </div>
        </Tooltip>
      );
    },
  },
  {
    title: '转办时间',
    dataIndex: 'sendtime',
    width: 150,
    align: 'center',
    hideInSearch: true,
  },
  {
    title: '联系电话',
    dataIndex: 'linkPhone',
    width: 100,
    align: 'center',
    hideInSearch: true,
  },
  {
    title: '信息来源',
    dataIndex: 'xxlyId',
    width: 100,
    align: 'center',
    hideInSearch: true,
    customRender: ({ record }) => {
      return selectDictLabel(xxlyDict.value, record.xxlyId);
    },
  },
];
</script>
<style lang="less">
.ant-input-number {
  width: 100%;
}

.workOrderNumber {
  color: #1890ff;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ant-tooltip-inner{
  width: 500px;
}
</style>